<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body style="background-color:rgb(1, 156, 128); ">
<header>
    <h1>使用js同时进行声音的录制和播放</h1>
</header>
<!--for record-->
<p>便录制边播放</p>
<audio controls></audio>
<!--'controls' use for add
	play, pause, and volume-->
<br/>
<br/>
<br/>
<br/>

<header>
    <h1>开始录制声音和结束录音</h1>
</header>
<h3>当前状态 ： <span class="play_status">未开始录音</span> </h3>
<p>

    <!--button for 'start recording'-->
    <button id="btnStart">开始录音</button>

    <button id="btnStop">结束录音</button>
    <!--button for 'stop recording'-->
</p>

<!--for play the audio-->
<h3>播放区间录制的声音</h3>
<audio id="audioPlay" controls></audio>
</body>
</html>
<script>

    let audioIN = {audio: true};
    // audio is true, for recording

    // Access the permission for use
    // the microphone
    navigator.mediaDevices.getUserMedia(audioIN)

        // 'then()' method returns a Promise
        .then(function (mediaStreamObj) {

            // Connect the media stream to the
            // first audio element
            let audio = document.querySelector('audio');
            //returns the recorded audio via 'audio' tag

            // 'srcObject' is a property which
            // takes the media object
            // This is supported in the newer browsers
            if ("srcObject" in audio) {
                audio.srcObject = mediaStreamObj;
            } else { // Old version
                audio.src = window.URL.createObjectURL(mediaStreamObj);
            }

            // It will play the audio
            audio.onloadedmetadata = function (ev) {

                // Play the audio in the 2nd audio
                // element what is being recorded
                audio.play();
            };

            // Start record
            let start = document.getElementById('btnStart');

            // Stop record
            let stop = document.getElementById('btnStop');

            // 2nd audio tag for play the audio
            let playAudio = document.getElementById('audioPlay');

            // This is the main thing to recorde
            // the audio 'MediaRecorder' API
            let mediaRecorder = new MediaRecorder(mediaStreamObj);
            // Pass the audio stream

            // Start event
            start.addEventListener('click', function (ev) {
                mediaRecorder.start();
                // console.log(mediaRecorder.state);
                $('.play_status').text('录音中……');
            })

            // Stop event
            stop.addEventListener('click', function (ev) {
                mediaRecorder.stop();
                // console.log(mediaRecorder.state);
                $('.play_status').text('未开始录音');
            });

            // If audio data available then push
            // it to the chunk array
            mediaRecorder.ondataavailable = function (ev) {
                dataArray.push(ev.data);
            }

            // Chunk array to store the audio data
            let dataArray = [];

            // Convert the audio data in to blob
            // after stopping the recording
            mediaRecorder.onstop = function (ev) {

                // blob of type mp3
                let audioData = new Blob(dataArray,
                    {'type': 'audio/mp3;'});

                // After fill up the chunk
                // array make it empty
                dataArray = [];

                // Creating audio url with reference
                // of created blob named 'audioData'
                let audioSrc = window.URL
                    .createObjectURL(audioData);

                // Pass the audio url to the 2nd video tag
                playAudio.src = audioSrc;
            }
        })

        // If any error occurs then handles the error
        .catch(function (err) {
            console.log(err.name, err.message);
        });
</script>
